<template>
  <div class="addMenus">
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="50%" center :before-close="handleClose">
      <div class="content">
        <el-form ref="formBox" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="菜单类型" prop="menuType">
            <el-select v-model="form.menuType" placeholder="请选菜单类型">
              <el-option label="目录" value="1"></el-option>
              <el-option label="菜单" value="2"></el-option>
              <el-option label="按钮" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单名称" prop="menuName">
            <el-input v-model="form.menuName"></el-input>
          </el-form-item>
          <el-form-item label="菜单路径" prop="menuUrl">
            <el-input v-model="form.menuUrl"></el-input>
          </el-form-item>
          <el-form-item label="菜单排序" prop="menuSort">
            <el-input v-model="form.menuSort"></el-input>
          </el-form-item>
          <el-form-item label="菜单状态">
            <el-switch v-model="form.menuStatus"></el-switch>
          </el-form-item>
          <el-form-item label="菜单图标" prop="menuIcon">
            <el-input v-model="form.menuIcon"></el-input>
          </el-form-item>
          <el-form-item label="父级菜单" prop="patternMenuId">
            <el-input v-model="form.patternMenuId"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sub(0)">取 消</el-button>
        <el-button type="primary" @click="sub(1)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { setMenus, updateMenus } from "../../api/sysApi";
export default {
  data() {
    let menuSortFun = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入正确的排序"));
      } else if (isNaN(-value)) {
        callback(new Error("请输入正确的排序"));
      } else {
        callback();
      }
    };
    return {
      centerDialogVisible: false,
      form: {
        menuName: "",
        menuType: "",
        menuUrl: "",
        menuSort: "",
        menuIcon: "",
        menuStatus: false,
        patternMenuId: ""
      },
      rules: {
        menuName: [
          { required: true, message: "请填写菜单名称", trigger: "blur" }
        ],
        menuType: [
          { required: true, message: "请选择菜单类型", trigger: "change" }
        ],
        menuUrl: [{ message: "请填写菜单路径", trigger: "blur" }],
        menuIcon: [
          { required: true, message: "请填写菜单图标", trigger: "blur" }
        ],
        menuSort: [{ validator: menuSortFun, required: true, trigger: "blur" }],
        patternMenuId: [{ message: "请填写父级ID", trigger: "blur" }]
      }
    };
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    menuInfo: {
      type: Object,
      default: null
    }
  },
  watch: {
    isShow(n, o) {
      this.centerDialogVisible = n;
    },
    menuInfo(n, o) {
      if (n == null) {
        this.form = {
          menuName: "",
          menuType: "",
          menuUrl: "",
          menuSort: "",
          menuIcon: "",
          menuStatus: false,
          patternMenuId: ""
        };
      } else {
        this.form = n;
      }
    }
  },
  created() { },
  methods: {
    //提交关闭按钮
    sub(t) {
      if (t == 1) {
        this.$refs.formBox.validate(valid => {
          if (valid) {
            //加载
            const loading = this.$loading({
              lock: true,
              text: "Loading",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)"
            });
            this.form.menuStatus = this.form.menuStatus ? "1" : "0";
            console.log(this.form);
            if (this.form.menuId == undefined || this.form.menuId == "") {
              //添加菜单
              setMenus(this.form).then(res => {
                console.log("add", res);
                this.resetFun();
                this.$emit("refreshBox");
                loading.close();
              });
            } else {
              //更新菜单
              updateMenus(this.form).then(res => {
                console.log("update", res);
                this.resetFun();
                this.$emit("refreshBox");
                loading.close();
              });
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else {
        this.centerDialogVisible = false;
        this.$emit("show");
        console.log("no");
      }
    },
    handleClose(done) {
      this.centerDialogVisible = false;
      this.$emit("show");
    },
    //重置表单
    resetFun() {
      this.$refs.formBox.$el.reset();
      this.centerDialogVisible = false;
      this.$emit("show");
    }
  }
};
</script>

<style>
.addMenus {}
</style>
